import React,{useEffect,useRef,useState} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Image
} from 'react-native';
import screen from '../utils/screen';
import Images from '../images/Images';
import {FontFamily, getffly, getString} from '../utils/common';
import ShadowBoxView from './ShadowBoxView';

export default class Marquee extends React.Component{



    componentDidMount() {
        let pageIndex = 0
        this.timer = setInterval(()=>{
            pageIndex = pageIndex + 1
            if(pageIndex <= this.props.data.length){
                this.scrollRef.scrollTo({x:0,y:screen.PIXEL_90 * pageIndex,animated:true})
                if(pageIndex === this.props.data.length) return
                let item = this.props.data[pageIndex]
                let data = {
                    type:this.getType(item.type),
                    amount:item.amount,
                    name:item.name
                }
                this.props.onChange(data)
            }else{
                pageIndex = 1
                this.scrollRef.scrollTo({x:0,y:0,animated:false})
            }
        },2500)
    }


    componentWillUnmount() {
        this.timer && clearInterval(this.timer)
    }

    getType(type){
        let typeStr = ''
        if(type === "order")
        {
            typeStr = getString('home.order_commission');
        }
        else if(type === "referral")
        {
            typeStr = getString('home.referral_reward');
        }
        return typeStr
    }


     handleScroll1 = (e) => {

    }

    render(){
        return (
            <ShadowBoxView
                shadowOption={{
                    radius:screen.PIXEL_40,
                    color:'#000',
                    x:0,
                    y:0,
                    border:5
                }}
            >
                <View style={styles.container}>
                    <ScrollView
                        ref={ref=>{
                            this.scrollRef = ref
                        }}
                        scrollEnabled={false}
                        horizontal={false}
                        bounces={false}
                        alwaysBounceVertical={false}
                        pagingEnabled={true}
                        onScroll={this.handleScroll1}
                        scrollEventThrottle={16}
                        showsVerticalScrollIndicator={false}
                        // onScrollBeginDrag={this.handleScrollBegin1}
                        // onScrollEndDrag={this.handleScrollEnd1}
                        // onMomentumScrollEnd={this.onMomentumScrollEnd1}

                    >
                        {
                            this.props.data.map((item,index)=>{
                                let str = this.getType(item.type)

                                return (
                                    <View style={{ width: '100%', height:screen.PIXEL_90, flexDirection: 'row', alignItems: 'center',paddingHorizontal:screen.PIXEL_30 }}
                                          key={index.toString()}
                                    >

                                        <Image
                                            source={Images.notice}
                                            resizeMode={'contain'}
                                            style={{ width: screen.PIXEL_30, height:screen.PIXEL_30,}}
                                        />
                                        <View style={{flex:1,marginLeft:screen.PIXEL_10,flexDirection: 'row',justifyContent:'space-between'}}>
                                            <Text style={{fontFamily:getffly("medium"), fontSize: 13, color: "#000" }}>{str}</Text>
                                            <View style={{flexDirection: 'row',alignItems:'center'}}>
                                                <Image source={Images.user_icon} resizeMode={'contain'} style={{width:12,height:12}}/>
                                                <Text style={{fontFamily:getffly("medium"), fontSize: 13, color: "#377C74",marginLeft:2 }}>{item.name}</Text>
                                            </View>

                                            <Text style={{fontFamily:getffly(FontFamily.bold), fontSize: 13, color: "#FF7B14" }}>{`+${item.amount}`}</Text>
                                        </View>


                                    </View>
                                )
                            })
                        }
                    </ScrollView>
                </View>


            </ShadowBoxView>
        )
    }


}




const styles = StyleSheet.create({
    container: {
        width:'100%',height:screen.PIXEL_90 ,flexDirection:'row',borderRadius:screen.PIXEL_90/2,
        backgroundColor:'#fff',overflow:'hidden'
    },
})
